<!--
 * @Descripttion: 过滤器V2
 * @version: 2.2
 * @Author: sakuya
 * @Date: 2021年7月30日14:48:41
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-09-17 12:46:15
-->

<template>
  <div style="width: 100%; height: 100%" @click.stop="StopClick">
    <!-- 输入框 -->
    <el-input
      v-if="['text', 'number'].indexOf(type) != -1"
      v-model="defaultValue"
      v-on="event"
      style="width: 100%; height: 100%"
      :placeholder="placeholder || '请输入'"
    >
    </el-input>
    <!-- 日期 -->
    <el-date-picker
      v-else-if="type == 'date'"
      v-model="defaultValue"
      type="date"
      value-format="YYYY-MM-DD"
      v-on="event"
      :placeholder="placeholder || '请选择日期'"
      style="width: 100%; height: 100%"
    ></el-date-picker>
    <!-- 日期范围 -->
    <el-date-picker
      v-else-if="type == 'daterange'"
      v-model="defaultValue"
      type="daterange"
      value-format="YYYY-MM-DD"
      v-on="event"
      :start-placeholder="placeholder ?? '开始日期'"
      :end-placeholder="placeholder ?? '结束日期'"
      style="width: 100%; height: 100%"
    ></el-date-picker>
    <!-- 日期范围 -->

    <el-date-picker
      v-else-if="type == 'monthrange'"
      v-model="defaultValue"
      type="monthrange"
      value-format="YYYY-MM"
      v-on="event"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="width: 100%; height: 100%"
    ></el-date-picker>
    <!-- 日期时间 -->
    <el-date-picker
      v-else-if="type == 'datetime'"
      v-model="defaultValue"
      type="datetime"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-on="event"
      :placeholder="placeholder || '请选择日期'"
      style="width: 100%; height: 100%"
    ></el-date-picker>
    <!-- 日期时间范围 -->
    <el-date-picker
      v-else-if="type == 'datetimerange'"
      v-model="defaultValue"
      type="datetimerange"
      v-on="event"
      value-format="YYYY-MM-DD HH:mm:ss"
      :default-time="
        (defaultTime = [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)])
      "
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="width: 100%; height: 100%"
      :placeholder="placeholder || '请输入'"
    >
    </el-date-picker>
    <!-- 开关 -->
    <el-switch
      v-else-if="type == 'switch'"
      v-model="defaultValue"
      v-on="event"
      :active-value="true"
      :inactive-value="false"
    >
    </el-switch>
    <!-- 标签 -->
    <el-select
      v-else-if="type == 'tags'"
      v-model="defaultValue"
      v-on="event"
      multiple
      filterable
      allow-create
      style="width: 100%; height: 100%"
      default-first-option
      no-data-text="输入关键词后按回车确认"
      :placeholder="placeholder || '请输入'"
    >
    </el-select>

    <skAutodcomplete
      v-else-if="type == 'autocomplet'"
      v-model="defaultValue"
      v-on="event"
      @select="autoSelect"
      :params="filterparams"
      style="width: 100%; height: 100%"
      :assign="row"
      :name="editkey"
      :showIcon="false"
      :placeholder="placeholder || '请输入'"
    >
    </skAutodcomplete>

    <skAutoChoose
      v-else-if="type == 'autochoose'"
      v-model="defaultValue"
      :event="event"
      @select="autoSelect"
      :showIcon="false"
      :params="filterparams"
      :assign="row"
      :name="editkey"
      :placeholder="placeholder || '请输入'"
    >
    </skAutoChoose>
    <skDicSelect
      v-else-if="type == 'select'"
      :editsource="editsource"
      v-model="selectValue"
      v-on="event"
      @dicSelect="dicSelect"
      :valueEqKey="false"
      style="width: 100%; height: 100%"
      :code="editkey"
      :params="filterparams"
      :placeholder="placeholder || '请输入'"
    >
    </skDicSelect>
    <skSelectColor
      v-else-if="type == 'ColorRender'"
      v-model="defaultValue"
      v-on="event"
      style="width: 100%; height: 100%"
    >
    </skSelectColor>

    <skDicCheckBox
      v-else-if="type == 'checkbox'"
      :editsource="editsource"
      v-model="selectValue"
      v-on="event"
      :valueEqKey="false"
      style="width: 100%; height: 100%"
      :code="editkey"
    >
    </skDicCheckBox>
  </div>
</template>

<script>
import skAutodcomplete from "@/components/skAutoComplete";
import skAutoChoose from "@/components/skAutoChoose";
import skDicSelect from "@/components/skDicSelect";
import skDicCheckBox from "@/components/skDicCheckBox";
import skSelectColor from "@/components/skSelectColor";

import XEUtils from "xe-utils";
export default {
  name: "skVxeFilterList",
  components: {
    skAutodcomplete,
    skDicSelect,
    skDicCheckBox,
    skAutoChoose,
    skSelectColor,
  },
  props: {
    placeholder: {},
    xtype: {},
    modelValue: {},
    multiple: {},
    params: {},
    filterparams: {},
  },
  data() {
    return {
      defaultValue: this.modelValue,
      type: this.xtype,
      editsource: "",
      editkey: "",
      event: {},
      selectValue: null,
      row: this.params.row,
      column: this.params.column,
    };
  },
  created() {
    const { Render, edit } = this.getRender();
    if (Render.attrs.editfilter != null && [...Render.attrs.editfilter].length > 0) {
      this.type = Render.attrs.editfilter;
      this.editkey = Render.attrs.editkey;
    } else {
      this.type = Render.attrs.xtype;
    }

    this.editsource = Render.attrs.editsource;

    if (edit) {
      if (typeof Render.attrs.editkey === "function") {
        this.editkey = Render.attrs.editkey(this.params);
      }
      if (typeof Render.attrs.xtype === "function") {
        this.type = Render.attrs.xtype(this.params);
      }
      //加载事件
      if (typeof Render.attrs.event != "undefined") {
        Object.keys(Render.attrs.event).forEach(key => {
          let callback = Render.attrs.event[key];
          this.event[key] = data => {
            callback({
              e: data,
              row: this.row,
              params: this.params,
            });
          };
        });
      }
      this.setValue();
    } else {
      this.selectValue = this.modelValue;
    }
  },
  mounted() {},

  watch: {
    modelValue(val) {
      this.defaultValue = val;
    },
    defaultValue(val) {
      this.setValue();
      this.$emit("update:modelValue", val);
    },

    row: {
      handler() {
        //和watch defaultValue 冲突
        this.$nextTick(() => {
          const nowValue = XEUtils.get(this.row, this.column.field);
          if (this.defaultValue != nowValue) {
            this.defaultValue = nowValue;
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    setValue() {
      const { Render, edit } = this.getRender();
      if (edit) {
        if (Render.attrs.filterfield) {
          this.selectValue = XEUtils.get(this.row, Render.attrs.filterfield);
        } else {
          this.selectValue = this.modelValue;
        }

        if (Render.attrs.editValue && this.selectValue == null) {
          XEUtils.set(this.row, Render.attrs.filterfield, Render.attrs.editValue);
          this.selectValue = Render.attrs.editValue;
        }
      }
    },
    //阻止事件冒泡
    getRender() {
      return typeof this.column.editRender != "undefined"
        ? { Render: this.column.editRender, edit: true }
        : { Render: this.column.filterRender, edit: false };
    },
    StopClick() {},
    autoSelect(data) {
      if (typeof this.column.editRender != "undefined")
        XEUtils.set(this.row, this.column.editRender.attrs.filterfield, data.id);
    },
    dicSelect(data = null) {
      let key = null;
      let label = null;
      if (data && data.key) {
        key = data.key;
        label = data.label;
      }
      const { Render, edit } = this.getRender();
      if (edit) {
        XEUtils.set(this.row, Render.attrs.filterfield, key);
        if (Render.attrs.filterfield != this.column.field) {
          XEUtils.set(this.row, this.column.field, label);
        }
      } else {
        this.defaultValue = key;
      }
    },
    checked(data) {
      this.dicSelect(data);
    },
  },
};
</script>
